<!DOCTYPE html>
<style>
    .square { break-inside:avoid; width:20px; height:20px; background:hotpink; }
</style>
<p>There should be five consecutive squares below, from left to right: hotpink, blue, hotpink, blue, hotpink.</p>
<div id="multicol" style="columns:1; background:blue;">
    <div class="square"></div>
    <div class="square" style="column-span:all;" id="spanner"></div>
    <div class="square"></div>
</div>
<script>
    document.body.offsetTop;
    document.getElementById("multicol").style.writingMode = "tb-rl";
    document.getElementById("spanner").style.margin = "0 20px";
</script>
